<template>
  <div class="user" :style="{'min-height':winHeight + 'px'}">
    <div class="user_text">
      <img :src="img01" alt="">
    </div>
    <ul class="user_ul">
      <li>
        <router-link to="/orderlist">
          <img :src="img02" alt="">
          <div>
            <span>我的订单</span>
            <img :src="img07" alt="">
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="img03" alt="">
          <div>
            <span>优惠券</span>
            <img :src="img07" alt="">
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/address">
          <img :src="img04" alt="">
          <div>
            <span>地址管理</span>
            <img :src="img07" alt="">
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="img05" alt="">
          <div>
            <span>联系客服</span>
            <img :src="img07" alt="">
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="img06" alt="">
          <div>
            <span>关于我们</span>
            <img :src="img07" alt="">
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import $ from 'jquery'
import img01 from '../common/images/user.jpg'
import img02 from '../common/images/icon_order.png'
import img03 from '../common/images/icon_coupon.png'
import img04 from '../common/images/icon_address.png'
import img05 from '../common/images/icon_contact.png'
import img06 from '../common/images/icon_aboutus.png'
import img07 from '../common/images/arrow-right.png'
export default {
  data () {
    return {
      img01,
      img02,
      img03,
      img04,
      img05,
      img06,
      img07,
      winHeight: ''
    }
  },
  created () {
    this.winHeight = $(window).height()
  }
}
</script>

<style>
.user{
  padding-bottom: 0rem !important;
  background-color: #f3f3f3;
}
.user_text{
  width: 6.9rem;
  height: 1.28rem;
  padding: 0.36rem 0.3rem;
  background-color:#f56d02;
}
.user_text img{
  width: 1.28rem;
  border-radius: 50%;
}
.user_ul{
  width: 7.2rem;
  padding-left: 0.3rem;
  background-color: #ffffff;
  margin-top: 0.3rem;
}
.user_ul li{
  width: 100%;
  height: 1rem;
  margin-top: 0.02rem;
}
.user_ul li a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user_ul li a img{
  display: block;
  width: 0.6rem;
}
.user_ul li a div{
  width: 5.8rem;
  height: 0.98rem;
  border-bottom: 1px solid #f2f2f2;
  padding-right: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user_ul li a div span{
  font-size: 0.36rem;
  color: #222222;
}
.user_ul li a div img{
  width: 0.12rem;
  height: 0.24rem;
}
</style>
